<template>
  <div>
    <van-popup :show="popshow" round get-container="body" close-on-click-overlay="false" custom-style="width:85%;border-radius:4px;" :overlay="true" @close="onClose">
      <div class="workForm">
        <van-form>
          <van-cell-group>
            <div class="title">
              请填写您的工作经历
            </div>
            <div class="timeStyle">
              <van-field v-model="workForm.startTime" label="开始时间" required placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickStart" />
              <van-popup :show="showTime" position="bottom">
                <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onStartTime" @cancel="onCancelStart" />
              </van-popup>
            </div>
            <div class="timeStyle">
              <van-field v-model="workForm.endTime" label="结束时间" required placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickEnd" />
              <van-popup :show="showEndTime" position="bottom">
                <van-datetime-picker type="date" :value="currentDates" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onEndTime" @cancel="onCancelEnd" />
              </van-popup>
            </div>
            <van-field v-model="workForm.workUnit" class="workClass" label="工作单位名称" placeholder-style="color:#999;" autosize required placeholder="请输入工作单位名称" type="textarea" @change="workForm.workUnit = $event.detail" />
            <drop-Down ref="inputForm" :columns="positionList" :required="true" :value="workForm.position" :label-name="'职位'" @changeValue="changeValue" />
            <van-field v-model="workForm.reasonLeave" class="workClass" label="离职原因" placeholder-style="color:#999;" autosize required placeholder="请输入离职原因" type="textarea" @change="workForm.reasonLeave = $event.detail" />
            <van-field v-model="workForm.certifier" class="workClass" label="证明人" placeholder-style="color:#999;" required placeholder="请输入证明人" type="input" @change="workForm.certifier = $event.detail" />
            <van-field v-model="workForm.mobile" class="workClass" label="证明人电话" placeholder-style="color:#999;" required placeholder="请输入证明人电话" type="tel" @blur="onBlur" @change="workForm.mobile = $event.detail" />
          </van-cell-group>
        </van-form>
        <div class="workBtn">
          <div class="cancel" @click="onClose">
            取消
          </div>
          <div class="submit" @click="getform">
            确定
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import dropDown from '../drop-down.vue'
import { checkMobile } from '../../../../utils/rule'
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
  components: { dropDown },
  props: { },
  data() {
    return {
      popshow: false,
      showTime: false,
      showEndTime: false,
      workForm: {
        startTime: '',
        endTime: '',
        workUnit: '',
        position: '',
        reasonLeave: '',
        certifier: '',
        mobile: '',
      },
      positionList: ['前端', 'java', 'UI', '测试工程师'],
      relationList: ['母子', '父子', '姐弟'],
      currentDate: new Date().getTime(),
      currentDates: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  methods: {
    // 电话号码失去焦点
    onBlur(val) {
      const number = checkMobile(val.detail.value)
      if (!number) {
        this.workForm.mobile = ''
      }
    },
    // 添加
    open() {
      this.popshow = true
      this.$refs.inputForm.cleanInput()
      this.workForm = {
        startTime: '',
        endTime: '',
        workUnit: '',
        position: '',
        reasonLeave: '',
        certifier: '',
        mobile: '',
      }
    },
    // 编辑
    edit(item) {
      item.isEdit = true
      this.workForm = item
      this.popshow = true
    },
    // 开始时间
    clickStart() {
      this.showTime = true
    },
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    onStartTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.workForm.startTime = GMT
      this.showTime = false
    },
    onCancelStart() {
      this.showTime = false
    },
    clickEnd() {
      this.showEndTime = true
    },
    onEndTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.workForm.endTime = GMT
      this.showEndTime = false
    },
    onCancelEnd() {
      this.showEndTime = false
    },
    // 关闭弹窗
    onClose() {
      this.popshow = false
    },
    // 提交
    getform() {
      if (this.workForm.startTime.trim().length === 0) {
        Toast('请选择开始时间')
        return
      }
      if (this.workForm.endTime.trim().length === 0) {
        Toast('请选择结束时间')
        return
      }
      if (this.workForm.workUnit.trim().length === 0) {
        Toast('请填写工作单位名称')
        return
      }
      if (this.workForm.position.trim().length === 0) {
        Toast('请选择职位')
        return
      }
      if (this.workForm.reasonLeave.trim().length === 0) {
        Toast('请填写离职原因')
        return
      }
      if (this.workForm.certifier.trim().length === 0) {
        Toast('请填写证明人')
        return
      }
      if (this.workForm.mobile.trim().length === 0) {
        Toast('请填写证明人电话')
        return
      }
      this.onClose()
      this.$emit('workValue', this.workForm)
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '职位':
          this.workForm.position = val.value
          break
      }
    },
  },
}
</script>
  <style lang="scss" scoped>
  .workForm{
      color:#333;
      font-size: 18px;
      font-weight: 600;
      padding-top:20px;
      text-align: center;
      .title{
          padding-bottom: 20px;
      }
      .workBtn{
          display: flex;
          color:#739ECA;
          height:64px;
          .cancel{
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              border:1px solid #F2F2F2;
          }
          .submit{
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
          }
      }
  }
  </style>
  <style lang="scss">
  .workClass{
    view {
      label{
        width:100%;
        display: flex;
        white-space: nowrap;
      }
      input{
        padding-right: 16px;
        text-align: right;
        color:#999;
      }
      textarea{
        padding-right: 16px;
        text-align: right;
        color:#999;
      }
    }
  }
  .timeStyle{
    view label{
      width:100%;
      display: flex;
    }
    view input{
      color:#999;
    }
  }
  </style>
